<!-- 发送验证码弹窗 -->
<template>
	<view>
		<u-popup ref="popup" v-model="show" mode="center" border-radius="14" :mask-close-able="false" closeable close-icon-size="40">
			<view class="popup-wrap">
				<view class="title">验证手机号</view>
				<view class="content">
					<view class="u-f-jsb code-item">
						<view>{{ userPhone }}</view>
						<view v-show="!isSend" class="send" @tap="sendMsg">发送验证码</view>
						<view v-show="isSend" class="send active">已发送 {{ second }}s</view>
					</view>
					<input type="number" v-model="msgCode" placeholder="请输入验证码" />
				</view>
				<view class="btn" @tap="btnEvent"><button type="default">确认</button></view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			msgCode: '',
			isSend: false,
			second: 60
		};
	},
	computed: {
		userPhone() {
			let userinfo = this.$store.state.userinfo;
			let phone = userinfo.userPhone || userinfo.userCode;
			return `${phone.substr(0, 3)}****${phone.substr(7)}`;
		}
	},
	methods: {
		sendMsg() {
			if (this.isSend) return;
			this.isSend = true;
			this.send();
			let timer = setInterval(() => {
				this.second--;
				if (this.second <= 0) {
					this.second = 60;
					this.isSend = false;
					clearInterval(timer);
				}
			}, 1000);
		},
		// 发送信息
		send() {
			this.$u.api._sendMsg().catch(e => {
				this.isSend = false;
			});
		},
		// 验证短信验证码
		async verifyMsgCode() {
			let userinfo = this.$store.state.userinfo;
			let phone = userinfo.userPhone || userinfo.userCode;
			let userMain = this.$store.state.userinfo.isMain;
			return this.$u.api._verifyMsgCode({ code: this.msgCode, userPhone:phone ,userMain});
		},
		btnEvent() {
			console.log(this.$store.state.userinfo);
			this.verifyMsgCode().then(res => {
				uni.showToast({
					title: '绑定成功'
				});
				this.msgCode = '';
				this.close();
				this.$emit('bindSucEvent');
			});
		},
		open() {
			this.show = true;
		},
		close() {
			this.show = false;
		}
	}
};
</script>

<style lang="scss">
.popup-wrap {
	width: 560rpx;
	height: 500rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	padding: 20rpx 30rpx;

	.title {
		font-weight: bold;
		font-size: 40rpx;
	}

	.content {
		font-size: 32rpx;
		color: #999999;
		text-align: center;
		margin: 20rpx 0;
		width: 100%;

		.code-item {
			color: #999999;
			font-size: 42rpx;
			margin: 20rpx 0;
			.send {
				color: #ff9239;
				background-color: #ffeee0;
				border-radius: 16rpx;
				width: 180rpx;
				line-height: 90rpx;
				font-size: 24rpx;

				&.active {
					background-color: #eee;
					color: #666;
				}
			}
		}

		input {
			background-color: #f4f4f4;
			border-radius: 16rpx;
			height: 90rpx;
			line-height: 90rpx;
			color: #333333;
		}
	}

	.btn {
		width: 100%;
		button {
			background-color: #323e56;
			color: #ffffff;
			text-align: center;
			font-size: 30rpx;
			line-height: 90rpx;
			border-radius: 16rpx;
		}
	}
}
</style>
